
import React, { useState } from 'react';
import { Tabs } from 'antd';
import { connect } from 'dva';

import './index.styl';

import RepairSingle from './RepairSingle'
import ReformSingle from './ReformSingle'
import ComplainSingle from './ComplainSingle'
import tools from './common/tools'

const { TabPane } = Tabs;

function DeviceRepair ({ location: { params } }) {
  // 获取默认keyId值
  const defaultkeyId = () => {
    window.onbeforeunload = () => {
      tools.cleanCacheAll()
    }
    if (params && params.type) {
      return params.type
    }
    if (params && params.codeText) {
      return 'repairSingle'
    }
    // 有缓存则优先展示缓存的tabs的key
    const repairTabsKey = localStorage.getItem('repairTabsKey')
    return repairTabsKey ? JSON.parse(repairTabsKey) : 'repairSingle'
  }

  const[keyId, changekeyId] = useState(defaultkeyId())

  // 维修单，整改单，投诉单 三个页面切换的keyId值
  function callback(keyId) {
    // 缓存当前的key
    localStorage.setItem('repairTabsKey', JSON.stringify(keyId))
    // 清除缓存数据
    changekeyId(keyId)
  }

  return (
    <div className="deviceRepair">
      <Tabs 
      onChange={callback} 
      type="card" 
      tabBarGutter={-2} 
      tabBarStyle={{ 
        marginBottom: 0,
      }} 
      activeKey={keyId}
      className='tabsStyle'
      >
        <TabPane tab={<span style={{fontWeight: 400}}>维修单</span>} key="repairSingle" className='tabPaneBox' >
          {
            keyId === 'repairSingle'
            ?
            <RepairSingle keyId='repairSingle' query={params ? params : {}}/>
            :
            null
          }
        </TabPane>
        <TabPane tab={<span style={{fontWeight: 400}}>整改单</span>} key="reformSingle" className="tabPaneBox">
          {
            keyId === 'reformSingle'
            ?
            <ReformSingle keyId='reformSingle' query={params ? params : {}}/>
            :
            null
          }
        </TabPane>
        <TabPane tab={<span style={{fontWeight: 400}}>投诉单</span>} key="complainSingle" className="tabPaneBox">
          {
            keyId === 'complainSingle'
            ?
            <ComplainSingle keyId='complainSingle' query={params ? params : {}}/>
            :
            null
          }
        </TabPane>
      </Tabs>
    </div>
  );
}

export default connect(({ deviceRepair }) => ({
  deviceRepair,
}))(DeviceRepair);